第一次知道CSS container是因為工作上需要,才會查到,情境如下:
.container{
width:100%;
height:30vh;
.child{
/* font-size須根據容器大小變化 */
font-size:5cqh;
}
&.active{
height:50vh;
.child{
/* font-size須根據容器大小變化 */
font-size:10cqh;
}
}
}
雖然可以有其他方法做的到,但看到有這個新屬性就迫不及待研究看看。
container
屬性是container-type
和container-name
兩個屬性的縮寫,可以寫成container:container-type/container-name;
屬性 | 值 |
---|---|
container-type |
normal :如果設定normal ,後代元素只能查詢容器樣式,容器尺寸將不能查詢,亦不能應用。 |
container-type |
inline-size :設定inline-size ,則只會查詢容器的inline尺寸, |
container-type |
size ,設定size 則inline尺寸及block尺寸都可以查詢。 |
container-name |
預設值default ;不用使用引號( |
容器的單位尺寸,與可視區(ViewPort)單位語法與意義相似;
可視區的單位vw、vh、vmin、vmax相似,可對應到cqw、cqh、cqmin、cqmax。
屬性 | 值 |
---|---|
cqw |
表示容器寬度單位(container query width)。1cqw =1%容器寬度。ex:容器100px寬,1cqw =1px。 |
cqi |
表示容器inline-size 單位(container query inline-size)。不特別設定下,inline-size 通常指的是水平方向,對應的會是容器寬度,因此1cqi 通常等於1cqw 。 |
cqh |
表示容器寬度單位(container query height)。1cqh =1%容器高度。ex:容器100px高,1cqh =1px。 |
cqb |
表示容器block-size 單位(container query block-size)。不特別設定下,block-size通常指的是垂直方向,對應的會是容器高度,因此1cqb 通常等於1cqh 。 |
cqmin |
表示容器較小尺寸的單位,ex:容器為寬1000px高800px的容器,較小邊是高800px,這時1qmin =1%容器高=8px。 |
cqmax |
表示容器較大尺寸的單位,ex:容器為寬1000px高800px的容器,較大邊是寬1000px,這時1qmax =1%容器寬=10px。 |
這篇提到,如果你的容器設定在自適應寬度,像是flex的子元素、abosulte的元素(子元素用自身撐abosulte父元素)、float元素、或是width設定fit-content的元素,container寬度都會為
0
,因此container相關的設定都會無法作用,2023/09/24實測一樣無作用。
CSS @container
是一種新的容器查詢,可以根據容器大小或計算樣式的變化來改變樣式@media
媒體查詢用法類似,@media
匹配的是瀏覽器視窗,@cintainer
則是某個指定元素